<template>
  <div class="category">
        <h3>{{title}}分类</h3>
        <ul>
            <li v-for="(d,index) of listData" :key="index">
                {{d}}
            </li>
        </ul>
        <!--当你在组件标签里写了东西后，vue解析不清楚
        需要将这个你写的dom元素放到哪里
        所以你需要定义一个插槽标签，
        来标识你需要把东西放在哪里
            默认插槽
    -->
        <!-- <slot>
            当没有插入东西，这些默认值会显示
        </slot> -->
        <!-- 具名插槽 -->
        <slot name="demo1">
            当没有插入东西，这些默认值会显示
        </slot>
        <slot name="demo2">
            当没有插入东西，这些默认值会显示
        </slot>

        <!-- 作用域插槽 可以将子组件的数据传递给父组件
        也就是使用该组件的插槽的组件
        同时也可以传递多个数据
        -->
        <slot name="demo3" :cData="customData" msg="hello"></slot>
  </div>
</template>

<script>
export default {
    name:"CategoryComponent",
    props:['title','listData'],
    data(){
        return {
            customData:["作用域插槽数据1",
            "作用域插槽数据2","作用域插槽数据1"]
        }
    }
}
</script>

<style scoped>
    .category{
        background-color: skyblue;
    }
</style>